<template>
  <div class="guide">
    <scroll  ref="verticalScroll">
      <div class="sort">
        <span>综合排序</span>
        <span>价格↓</span>
        <span>价格↑</span>
      </div>

      <div class="carList" v-for="n in 20" :key="n">
        <div class="guideSummary">
          <div class="guidePortrait">
            <img :src="GuideImg" alt="">
          </div>
          <div class="guideSummaryText">
            <div class="guideNickname">
              <span>雨声</span>
              <badge text="90后"></badge>
              <badge text="活地图"></badge>
            </div>
            <div class="serviceArea">服务地：榕江</div>
          </div>
        </div>



        <div class="guideSummaryTex" v-for="n in 3" :key="n">
          <div class="carImg">
            <img :src='GuideImg' alt="">
          </div>
          <div class="carDescribe">
            <div class="carDescribeTop">
              <h4>千户苗寨包天导游服务</h4>
              <span>讲解时长：这里是讲解这里是讲解这里是讲解这里是讲解这里是讲解这里是讲解</span>
            </div>
            <div class="carDescribeBottom">
              <span>¥200/天</span>
              <button>查看</button>
            </div>
          </div>

        </div>
      </div>
    </scroll>
  </div>
</template>

<script type='text/ecmascript-6'>
import scroll from '@/components/scroll/scroll'
import GuideImg from '@/assets/img/guide.png'
import { Badge } from 'vux'

export default {
  data () {
    return {
      GuideImg: GuideImg
    }
  },
  components: {
    scroll,
    Badge
  },
  mounted () {
    this.$refs.verticalScroll.$el.style.height = (window.innerHeight - 110) + 'px'
  }
}
</script>

<style lang='stylus' rel='stylesheet/stylus' scoped>
@import '~@/assets/css/variable.styl'
  .sort {
    display flex
    justify-content space-around
    padding 20px 0
    margin-bottom 10px
    background #fff
    box-shadow 0px 0px 15px grey
    font-size $font-size-title
  }
  .guideSummary {
    display flex
    border 1px solid rgba(0,0,0,0.05)
    box-shadow 0 6px 10px grey
    padding 10px 20px
    margin-bottom 10px
    border-bottom-left-radius 20px
    // border-bottom-right-radius 20px
    border-bottom 1px dotted rgba(0,0,0,0.1)
    .guidePortrait{
      img {
        width 60px
        border-radius 50px
        margin-right 10px
      }
    }
    .guideSummaryText{
      display flex
      flex-direction column
      align-items flex-start
      .guideNickname{
        display flex
        align-items center
      }
      .serviceArea{
        font-size $font-size-small
        color $color-text-2
        margin-top  10px
      }
    }
  }
    .carList{
      background #fff
      padding 20px 10px
      margin-bottom 10px
      .guideSummaryTex{
        display flex
        justify-content space-around
        align-items center
        margin 15px 0
        .carImg{
          img {
            width 100px
            border-radius 10px
          }
        }
      .carDescribe {
        width 60%
        display flex
        justify-content space-around
        .carDescribeTop{
          width 70%
          h4 {
            font-size $font-size-title
            color $color-text-1
          }
          span {
            font-size $font-size-small
            color $color-text-2
          }
        }
        .carDescribeBottom{
          display flex
          flex-direction column
          justify-content center
          span {
            font-size $font-size-title
            color $color-theme
          }
        }
      }
    }
  }
  .vux-x-icon {
    fill $color-theme
  }
</style>
